<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>弹出式菜单</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="./actionsheet.css">
    <link rel="stylesheet" href="../button/button.css">
    <!--<link rel="stylesheet" href="../weui.css">-->
</head>
<body style="padding-top: 200px">
<div class="page js_show">
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="btn btn_default" id="showIOSActionSheet">iOS ActionSheet</a>
        <a href="javascript:;" class="btn btn_primary" id="showAndroidActionSheet">Android ActionSheet</a>
    </div>
    <!--BEGIN actionSheet-->
    <div>
        <div class="mask" id="iosMask" style="opacity: 0; display: none;"></div>
        <div class="actionsheet" id="iosActionsheet">
            <div class="actionsheet__menu">
                <div class="actionsheet__cell">示例菜单一</div>
                <div class="actionsheet__cell">示例菜单二</div>
                <div class="actionsheet__cell">示例菜单三</div>
                <div class="actionsheet__cell">示例菜单四</div>
            </div>
            <div class="actionsheet__action">
                <div class="actionsheet__cell" id="iosActionsheetCancel">取消</div>
            </div>
        </div>
    </div>

    <div class="skin_android" id="androidActionsheet" style="display: none">
        <div class="mask"></div>
        <div class="actionsheet">
            <div class="actionsheet__menu">
                <div class="actionsheet__cell">示例菜单一</div>
                <div class="actionsheet__cell">示例菜单二</div>
                <div class="actionsheet__cell">示例菜单三</div>
            </div>
        </div>
    </div>
    <!--END actionSheet-->
</div>
<script src="../zepto.min.js"></script>
<script>
    //  ios
    //ios的菜单不包含模态框
    $(function(){
        var $iosActionsheet = $('#iosActionsheet');//ios示例菜单
        var $iosMask = $('#iosMask');//ios模态框

        function hideActionSheet() {
            $iosActionsheet.removeClass('actionsheet_toggle');
            $iosMask.fadeOut(200);
        }
        $iosMask.on('click', hideActionSheet);//模态框点击,隐藏模态框并隐藏菜单
        $('#iosActionsheetCancel').on('click', hideActionSheet);
        $("#showIOSActionSheet").on("click", function(){//ios按钮点击
            $iosActionsheet.addClass('actionsheet_toggle');//actionsheet_toggle将原来y方向向下平移100%的改为0;
            $iosMask.fadeIn(200);//模态框显示
        });
    });

    // android
    //安卓的菜单包含了模态框
    $(function(){
        var $androidActionSheet = $('#androidActionsheet');//Android示例菜单
        var $androidMask = $androidActionSheet.find('.mask');//安卓模态框
        $("#showAndroidActionSheet").on('click', function(){//安卓菜单按钮点击
            $androidActionSheet.fadeIn(200);//菜单显示
            $androidMask.on('click',function () {
                $androidActionSheet.fadeOut(200);//模态框点击,菜单隐藏
            });
        });
    });
</script>
</body>
</html>